<template>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    title="用户注册"
  />
  <a-steps
    progress-dot
    :current="stepCurrent"
    size="small"
    style="margin-top: 30px; margin-left: 240px; width: 1000px"
  >
    <a-step title="用户注册信息" />
    <a-step title="完善邮箱验证" />
    <a-step title="注册完成" />
  </a-steps>
  <div>
    <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item
        label="账号"
        has-feedback
        :validateStatus="type1"
        :help="message1"
      >
        <a-input
          v-model:value="user.user_id"
          placeholder="请输入用户账号"
          @change="checkId"
        />
      </a-form-item>

      <a-form-item
        label="密码"
        has-feedback
        :validate-status="type3"
        :help="message3"
      >
        <a-input-password
          v-model:value="user.user_pwd"
          @change="checkPwd"
          placeholder="请输入密码"
        />
      </a-form-item>

      <a-form-item
        label="确认密码"
        has-feedback
        :validate-status="type2"
        :help="message2"
      >
        <a-input-password
          v-model:value="user.user_pwd2"
          @change="checkPwd2"
          placeholder="请重复密码"
        />
      </a-form-item>

      <a-form-item
        label="用户名称"
        has-feedback
        :validate-status="type4"
        :help="message4"
      >
        <a-input
          v-model:value="user.user_name"
          @change="checkName"
          placeholder="请输入用户名称"
        />
      </a-form-item>

      <a-form-item label="年龄">
        <a-input
          v-model:value="user.user_age"
          @change=""
          placeholder="请输入年龄"
        />
      </a-form-item>

      <a-form-item
        label="电话"
        has-feedback
        :validate-status="type5"
        :help="message5"
      >
        <a-input
          v-model:value="user.user_phone"
          @change="checkPhone"
          placeholder="请输入电话号"
        />
      </a-form-item>
    </a-form>
  </div>
  <div>
    <a-form-item>
      <a-radio-group
        v-model:value="user.temp"
        @change="changeTheButton"
        style="margin-left: 170px"
      >
        <a-form-item label="账户类型">
          <a-radio :value="1"> 需求用户 </a-radio>
          <a-radio :value="0"> 标注人员 </a-radio>
        </a-form-item>
      </a-radio-group>
    </a-form-item>
  </div>

  <a-button
    :disabled="buttonStatus"
    style="margin-left: 800px"
    @click="register"
    >完成注册</a-button
  >
</template>
<script setup>
///////////////////////////////////////////////////////////引入
import { reactive, ref } from "vue";
import { post, setLocalToken } from "@/common";
import { useRouter } from "vue-router";
import { get } from "@/common";
import { message } from "ant-design-vue";
////////////////////////////////////////////////////////////变量
const user = reactive({
  user_id: "",
  user_pwd: "",
  user_name: "",
  user_pwd2: "",
  role_id: "",
  user_phone: "",
  user_age: "",
  temp: "",
});

const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 14,
};

const type1 = ref("");
const message1 = ref("");

const type3 = ref("");
const message3 = ref("");

const type2 = ref("");
const message2 = ref("");

const type4 = ref("");
const message4 = ref("");

const type5 = ref("");
const message5 = ref("");

const buttonStatus = ref(true);

const router = useRouter();

////////////////////////////////////////////////////////////

const checkId = () => {
  if (user.user_id.length > 0) {
    type1.value = "success";
    message1.value = "";
  } else {
    type1.value = "error";
    message1.value = "账号不为空";
  }
};

const checkPhone = () => {
  if (user.user_phone.length == 11) {
    type5.value = "success";
    message5.value = "";
  } else {
    type5.value = "error";
    message5.value = "请输入正确的电话号";
  }
};

const checkPwd = () => {
  if (user.user_pwd.length >= 6) {
    type3.value = "success";
    message3.value = "";
  } else {
    type3.value = "error";
    message3.value = "密码不少于6位";
  }
};

const checkPwd2 = () => {
  if (user.user_pwd == user.user_pwd2) {
    type2.value = "success";
    message2.value = "";
  } else {
    type2.value = "error";
    message2.value = "两次密码不相同";
  }
};

const checkName = () => {
  if (user.user_name.length > 0) {
    type4.value = "success";
    message4.value = "";
  } else {
    type4.value = "error";
    message4.value = "名称不合法";
  }
};

const changeTheButton = () => {
  buttonStatus.value = false;
  if (user.temp == 0) {
    user.role_id = "respondent";
  } else if (user.temp == 1) {
    user.role_id = "demander";
  }
  // message.info(user.role_id)
};

const register = () => {
  if (type1.value == "success") {
    if (type3.value == "success") {
      if (type2.value == "success") {
        if (user.user_pwd.length < 6) {
          message.error("密码不得少于6位");
        } else {
          if (
            user.user_id.length == 0 ||
            user.user_name.length == 0 ||
            user.role_id.length == 0
          ) {
            message.error("请不要留空");
          } else {
            post("/security/register", user).then((res) => {
              if (res.success) {
                message.success(res.message);
                router.push({ path: "/security/registeMail" });
              } else {
                message.error(res.message);
              }
              localStorage.setItem("user_id", user.user_id);
            });
          }
        }
      } else {
        message.error(message2.value)
      }
    }else{
      message.error(message3.value)
    }
  }else{
    message.error(message1.value)
  }
};
///////////////////////////////////////////////////
</script>

<style>
</style>